{% load static %}
{% load i18n %}
{% load user_dict from user_dict %}
{% load bundle from vue %}
{% load bundlechunk from vue %}

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  {% block meta_viewport %}
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  {% endblock meta_viewport %}
  <meta name="description" content="The all-in-one, open-source, smart 3D printing platform for makers. {{ page_context.syndicate.display_name }} is the easiest way to monitor and control your 3D printer from anywhere.">
  <meta name="author" content="">

  {% block title %}
  <title>{{ page_context.syndicate.display_name }}</title>
  {% endblock title %}

  <!-- Font Awesome -->
  <link
    rel="stylesheet"
    href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
    integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
    crossorigin="anonymous"
  >

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">

  <link rel="stylesheet" type="text/css" href="{% static 'vendor/css/sweetalert2.min.css' %}" />

  {% bundle 'styles' %}
  {% bundlechunk 'chunk-vendors' 'css' %}

  {% block page_css %}{% endblock page_css %}

  <!-- favicons -->
  {% with favicon_path='img/favicon.png' %}
    {% if page_context.syndicate and page_context.syndicate.name != 'base' %}
      {% with favicon_path=page_context.syndicate.name|add:'/img/favicon.png' %}
        <link rel="icon" type="image/png" href="{% static favicon_path %}">
      {% endwith %}
    {% else %}
      <link rel="icon" type="image/png" href="{% static favicon_path %}">
    {% endif %}
  {% endwith %}

  <meta name="theme-color" content="rgb(45 62 79)">

  {% block header_ext %}{% endblock header_ext %}

  {{ settings|json_script:"settings-json" }}
  {{ user|user_dict|json_script:"user-json" }}
  {{ page_context|json_script:"page-context-json" }}
</head>

<body data-tenant="{{ page_context.syndicate.name }}">
  {% csrf_token %}
  {% block top_page_js %}{% endblock top_page_js %}

  {% block body_top_ext %}{% endblock body_top_ext %}
  {% include "snippets/svg_sprite.html" %}

  <!-- For non_vue_layout only -->
  {% block navbar %} {% endblock navbar %}

  <main>
    {% include 'snippets/messages.html' %}
    {% block content %}{% endblock content %}
  </main>

  <!-- Optional: include a polyfill for ES6 Promises for IE11 and Android browser -->
  <script src="{% static 'vendor/js/polyfill.min.js' %}"></script>

  <!-- Bootstrap and dependecies -->
  {% block bootstrap_js %}
  <script src="{% static 'vendor/js/jquery-3.4.1.min.js' %}"></script>
  <script src="{% static 'vendor/js/popper.min.js' %}"></script>
  <script src="{% static 'vendor/js/bootstrap.min.js' %}"></script>
  {% endblock %}

  <!-- Useful libs -->
  {% block useful_libs %}
  <script src="{% static 'vendor/js/clipboard.min.js' %}"></script>
  <script src="{% static 'vendor/js/bootstrap-input-spinner.min.js' %}"></script>
  <script src="{% static 'vendor/js/download.min.js' %}"></script>
  <script src="{% static 'vendor/js/filesize.min.js' %}"></script>
  {% endblock %}

  <!-- Bundles -->
  {% bundlechunk 'chunk-vendors' 'js' %}

  {% block page_js %}{% endblock page_js %}
  {% block body_bottom_ext %}{% endblock body_bottom_ext %}
</body>

</html>
